<script setup>
import {ref} from 'vue'
import {useRouter} from "vue-router";
import {saveCustomer} from "@/api/customer.js"
import {ElMessage} from "element-plus";
//路由实例
const router = useRouter();
//市场选项
const marketOptions = [
  {
    label: '内销',
    value: 1
  },
  {
    label: '外销',
    value: 2
  }
];
//国家选项
const countryOptions = ref([])

//表单引用 声明同名引用
const addForm = ref();
//表单对象
const customer=ref({
  account: "",
  address: "",
  boss: "",
  boss_email: "",
  boss_phone: "",
  cid: 0,
  company: "",
  company_profile: "",
  contactName: "",
  country: "",
  courier_address: "",
  customer_email: "",
  customer_type: 0,
  destination: "",
  id: 0,
  interestPid: 0,
  interestProduct: "",
  isFit: 0,
  market: 1,
  mobile: "",
  model: "",
  password: "",
  product: "",
  saleId: 0,
  source: 0,
  target_port: "",
  validMobile: ""});

//验证规则
const rules = {
  company: [{required: true, message: '请输入客户公司名称', trigger: 'blur'}],
  account:[{required: true, message: '请输入用户名', trigger: 'blur'}],
  password:[{required: true, message: '请输入密码', trigger: 'blur'}]
}
//成交或询价产品
const product=ref([])
//取消
function close(){
  router.push("/customer/list")
}
//保存
async function save(){
  let valid=await addForm.value.validate(()=>{})
  if(!valid){
    return;
  }
  customer.value.product=product.value.join(" ");

  //保存
  let res=await saveCustomer(customer.value);
  if(res.code===200) {
    ElMessage({
      message: "保存成功",
      type: "success"
    });
    close();
  }
}
</script>

<template>
  <div>
  <el-form :model="customer"
           :rules="rules"
           ref="addForm"
           label-width="auto"
           style="max-width: 1000px;
           margin: auto;
           background-color: white;
           padding: 20px;">
    <div style="background-color: #fff;height: 30px;line-height: 30px;border-bottom: solid 1px #ccc;margin-bottom: 10px">基础信息</div>
    <el-row>
      <el-col :span="12">
        <el-form-item label="市场:">
          <el-select
            v-model="customer.market"
            placeholder="请选择 内销、外销"
            >
            <el-option
              v-for="item in marketOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="国家:">
          <el-select
            v-model="customer.country"
            placeholder="内销时为省市区,外销时为国家"
            >
            <el-option
              v-for="item in countryOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="客户公司名称:" prop="company">
          <el-input v-model="customer.company"
                    placeholder="请输入"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="机型:">
          <el-input v-model="customer.mobile"
                    placeholder="请输入"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="成交或询价:">
          <el-checkbox-group v-model="product">
            <el-checkbox label="配件" value="配件" />
            <el-checkbox label="固定设备" value="固定设备" />
            <el-checkbox label="移动设备" value="移动设备" />
          </el-checkbox-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="感兴趣的产品:">
          <el-input v-model="customer.product"
                    placeholder="请输入"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="客户联系人:">
          <el-select
            v-model="customer.contactName"
            placeholder="请输入"
          >
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="客户联系手机::">
          <el-select
            v-model="customer.model"
            placeholder="请输入"
          >
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="客户邮箱:">
          <el-select
            v-model="customer.customer_email"
            placeholder="请输入"
          >
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="老板联系人:">
          <el-select
            v-model="customer.boss"
            placeholder="请输入"
          >
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="老板联系手机:">
          <el-select
            v-model="customer.boss_phone"
            placeholder="请输入"
          >
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="老板邮箱:">
          <el-select
            v-model="customer.boss_email"
            placeholder="请输入"
          >
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="联系地址:">
          <el-select
            v-model="customer.address"
            placeholder="请输入"
          >
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="客户目的港口:">
          <el-select
            v-model="customer.target_port"
            placeholder="请输入"
          >
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="客户分类id:">
          <el-input v-model="customer.cid"
                    placeholder="请输入"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="客户类型:">
          <el-select
            v-model="customer.customer_type"
            placeholder="请输入"
          >
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-form-item label="公司简介:">
          <textarea rows="5" cols="150" style="border: #ccc solid 1px"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="客户目的地:">
          <el-select
            v-model="customer.destination"
            placeholder="请输入"
          >
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="目的地和快递地址是否一致:">
          <el-radio-group v-model="customer.isFit">
            <el-radio value="1">一致</el-radio>
            <el-radio value="0">不一致</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="快递地址:">
          <el-input v-model="customer.courier_address"/>
        </el-form-item>
      </el-col>
    </el-row>
    <div style="background-color: #fff;height: 30px;line-height: 30px;border-bottom: solid 1px #ccc;margin-bottom: 10px">账号信息</div>
    <el-row>
      <el-col :span="12">
        <el-form-item label="所属销售:">
          <el-input v-model="customer.saleId"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="账号:" prop="account">
          <el-input v-model="customer.account"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="密码:" prop="password">
          <el-input v-model="customer.password" type="password"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="12">
        <el-form-item label="密码验证手机号:">
          <el-input v-model="customer.validMobile"/>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
    <div style="text-align: center;margin: 20px">
      <el-button type="primary" @click="save">保存</el-button>
      <el-button type="info" @click="close">取消</el-button>
    </div>
  </div>

</template>

<style scoped>

</style>
